<template>
    <div class="checkBox">
        <input type="checkbox" name="" :checked="history" :value="value" :id="'checkBoxInput' + value"
            @change="checkboxChange">
        <label :for="'checkBoxInput' + value"></label>
    </div>
</template>


<script>
export default {
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        history: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        checkboxChange(e) {
            this.$emit('message', e.target.checked)
        }
    }
}
</script>

<style lang="less" scoped>
.checkBox {
    position: relative;
    width: 0.85rem;
    height: 0.85rem;
}

input[type=checkbox] {
    visibility: hidden;
}

.checkBox label {
    position: absolute;
    width: 0.85rem;
    height: 0.85rem;
    top: 0;
    left: 0;
    background: url('@/assets/img/checkbox/icon-checkbox.png') no-repeat;
    background-size: 100% 100%;
}

.checkBox label:after {
    opacity: 0;
    /*修改为0*/
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url('@/assets/img/checkbox/icon-checkbox-active.png') no-repeat;
    background-size: 100% 100%;

}


.checkBox input[type=checkbox]:checked+label:after {
    opacity: 1;
}
</style>    